<template>
<el-input
  v-model="Year"
  maxlength="30"
  style="width: 200px; margin-right: 10px"
  placeholder="年份"
  size="small"
  clearable
  @input="getBatchList"
/>

<el-button type="primary" icon="el-icon-refresh-right" @click="getBatchList"></el-button>

  <el-divider direction="vertical" />

  <el-button type="primary" icon="el-icon-plus" @click="dialogVisibleAdd=true"></el-button>

<el-table :data="BatchList" stripe style="width: 100%">
    <el-table-column prop="CreateTime" label="创建时间" />
    <el-table-column prop="Year" label="年份" />
    <el-table-column prop="Term" label="学期" />
    <el-table-column prop="Week" label="周次" />
    <el-table-column prop="IsCurrent" label="当前周次" >
     <template #default="scope">
        <div v-if="scope.row.IsCurrent == 1">
            <em class="state state-1 status-processing"></em>当前周次
          </div>
          <div v-else>/</div>
      </template>
      </el-table-column>
    <el-table-column label="操作" >
    <template #default="scope">
       <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="是否设置为当前周次?"
            @confirm="handlePut(scope.$index, scope.row)"
          >
            <template #reference>
             <el-button type="text">设置</el-button>
            </template>
          </el-popconfirm>

<el-divider direction="vertical" />

       <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确认删除?"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button type="text">删除</el-button>
            </template>
          </el-popconfirm>
      </template>
      </el-table-column>
  </el-table>

  <el-pagination
      style="margin-top:10px"
      background 
      :hide-on-single-page="true"
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="changePage"
    />

   <el-dialog v-model="dialogVisibleAdd" title="创建周次">
   <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="年份" prop="Year">
        <el-select
        clearable
        v-model="form.Year"
        placeholder="年份"
        size="small"
      >
        <el-option
          v-for="item in optionsYear"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
        </el-select>
        
      </el-form-item>
      <el-form-item label="学期" prop="Term">
        <el-select
        clearable
        v-model="form.Term"
        placeholder="学期"
        size="small"
      >
        <el-option label="1" value="1"></el-option>
        <el-option label="2" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="周次" prop="Week">
        <el-select
        clearable
        v-model="form.Week"
        placeholder="周次"
        size="small"
      >
        <el-option
        v-for="item in 30"
          :key="item"
          :label="item"
          :value="item"
        />
        </el-select>
      </el-form-item>
   </el-form>
     <template #footer>
       <el-button @click="onAddBatch('form')">仅创建</el-button>
     <el-button type="primary" @click="onAddCurrentBatch('form')">创建并设置为当前周次</el-button>
     </template>
  </el-dialog>

</template>

<script>
import { reactive, toRefs, onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import Batch from "@/api/model/batch";
export default {
  setup() {
    const state = reactive({
      BatchList:[],
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10, // 分页大小
      dialogVisibleAdd:false,
      Year:"",
      form:{
        Year:"",
        Term:"",
        Week:"",
      },
      optionsYear:[],
      rules:{
        Year: [
          {
            required: true,
            message: "请输入年份",
            trigger: "blur",
          }
        ],
        Term: [
          {
            required: true,
            message: "请输入学期",
            trigger: "blur",
          }
        ],
        Week: [
          {
            required: true,
            message: "请输入周次",
            trigger: "blur",
          }
        ],
      },
    });

const formRef = ref(null);

    //创建当前周次
    const onAddCurrentBatch = () => {
      formRef.value.validate((valid) => {
        if (valid) {
        const params = {
        Year: state.form.Year,
        Term: state.form.Term,
        Week: state.form.Week,
        IsCurrent: 1,
      };
      Batch.APIBatchAdd.http(params).then((res) => {
          if (res.code === "2000") {
              state.dialogVisibleAdd = false;
              getBatchList();
              ElMessage({
                message: "添加成功.",
                type: "success",
              });
            } else {
              ElMessage.error("该添加失败");
            }

      });
        } else {
          return false;
        }
      });
    };

    //创建周次
    const onAddBatch = () => {
      formRef.value.validate((valid) => {
        if (valid) {
        const params = {
        Year: state.form.Year,
        Term: state.form.Term,
        Week: state.form.Week,
        IsCurrent: 0,
      };
      Batch.APIBatchAdd.http(params).then((res) => {
          if (res.code === "2000") {
              state.dialogVisibleAdd = false;
              getBatchList();
              ElMessage({
                message: "添加成功.",
                type: "success",
              });
            } else {
              ElMessage.error("该添加失败");
            }

      });
        } else {
          return false;
        }
      });
    };



    //获取当前年份
    const getCurrentYear=()=>{
      const  date =  new  Date();
      const  currentdate = date.getFullYear()
      state.optionsYear=[
        {
          value:currentdate.toString(),
          laber:currentdate.toString(),
        }]
    }

    const getBatchList=()=>{
       const params = {
        Year:state.Year,
        Page: state.currentPage,
        Size: state.pageSize,
      };
      Batch.APIBatchList.http(params).then((res) => {
        state.BatchList=res.data;
        state.total = res.totalCount;
      });
    }

     const handleDelete=(index, row)=>{
       const params = {
        BatchID:row.BatchID
      };
      Batch.APIBatchDelete.http(params).then((res) => {
        if (res.code === "2000") {
          getBatchList();
          ElMessage({
            message: "删除成功.",
            type: "success",
          });
        } else {
          ElMessage.error("删除失败");
        }
      });
    }

     const handlePut=(index, row)=>{
       const params = {
        BatchID:row.BatchID,
        IsCurrent:1
      };
      Batch.APIBatchPut.http(params).then((res) => {
        if (res.code === "2000") {
          getBatchList();
          ElMessage({
            message: "操作成功.",
            type: "success",
          });
        } else {
          ElMessage.error("操作失败");
        }
      });
    }

     // 换页
    const changePage = (val) => {
      state.currentPage = val;
      getBatchList();
    };


    onMounted(() => {
      getCurrentYear();
      getBatchList();
    });

    
    return {
      ...toRefs(state),
      changePage,
      onAddCurrentBatch,
      onAddBatch,
      handleDelete,
      handlePut,
      getBatchList,
    };

  },
};
</script>

<style scoped>
</style>